<%@ page language="java" import="java.util.*, com.zjut.zs.util.tools.*,com.zjut.zs.userinfo.manager.*, com.zjut.zs.userinfo.dao.*,
com.zjut.zs.user.manager.*, com.zjut.zs.user.dao.*,com.zjut.an.util.tools.*,com.zjut.an.util.system.*" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>找回密码 - 考生系统</title>
    <script src="css/tailwindcss.css"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3b82f6',
                        secondary: '#64748b',
                        success: '#10b981',
                        danger: '#ef4444',
                        warning: '#f59e0b'
                    }
                }
            }
        }
    </script>
    <style>
        .form-input:focus {
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }
        .btn-disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }
    </style>
</head>

<body class="bg-gray-50 min-h-screen flex items-center justify-center py-8">
<div class="w-full max-w-md mx-auto">

    <div class="bg-white rounded-xl shadow-lg border border-gray-100 p-8">
        <div class="text-center mb-8">
            <h1 class="text-2xl font-bold text-gray-800 mb-2">找回密码</h1>
            <p class="text-gray-600">请验证身份信息后重置密码</p>
        </div>

        <form id="ff" name="add" role="form" action="javascript:submitForm();" method="post" class="space-y-6">
            <!-- 身份证号输入 -->
            <div>
                <label for="usIdcard" class="block text-sm font-medium text-gray-700 mb-2">
                    身份证号 <span class="text-red-500">*</span>
                </label>
                <input id="usIdcard" name="usIdcard" type="text"
                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent transition-colors duration-200 form-input"
                       placeholder="请输入身份证号码"
                       required
                       data-rule-idCard="true"
                       data-msg-required="身份证号不能为空"
                       data-msg-idCard="请输入有效的身份证号码"
                       value=""
                       onblur="checkidcard()"/>
                <div id="idcardlabel" class="text-sm text-gray-500 mt-1"></div>
            </div>

            <!-- 手机号输入 -->
            <div>
                <label for="usMobile" class="block text-sm font-medium text-gray-700 mb-2">
                    注册手机号 <span class="text-red-500">*</span>
                </label>
                <input id="usMobile" name="usMobile" type="text"
                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent transition-colors duration-200 form-input"
                       placeholder="请输入注册时的手机号"
                       required
                       data-rule-mobile="true"
                       data-msg-required="请输入手机号"
                       data-msg-mobile="请输入正确格式"
                       onkeyup="this.value=this.value.replace(/\D/g,'')"
                       onblur="checkmobile()"/>
                <div id="mobilelabel" class="text-sm text-gray-500 mt-1">请填写注册时的手机号</div>
            </div>

            <!-- 验证码输入 -->
            <div>
                <label for="code" class="block text-sm font-medium text-gray-700 mb-2">
                    验证码 <span class="text-red-500">*</span>
                </label>
                <div class="flex space-x-3">
                    <input type="text" id="code" name="code"
                           class="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent transition-colors duration-200 form-input"
                           placeholder="请输入验证码"
                           onblur="checkcode()"
                           required/>
                    <button type="button" id="hqyzm"
                            class="px-4 py-3 bg-primary hover:bg-primary-dark text-white font-medium rounded-lg transition-colors duration-200 whitespace-nowrap"
                            onclick="getcode()">
                        获取验证码
                    </button>
                </div>
                <div id="codelabel" class="text-sm text-gray-500 mt-1">输入手机获取到的验证码</div>
            </div>

            <!-- 新密码输入 -->
            <div>
                <label for="usPassword" class="block text-sm font-medium text-gray-700 mb-2">
                    新密码 <span class="text-red-500">*</span>
                </label>
                <input id="usPassword" name="usPassword" type="password"
                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent transition-colors duration-200 form-input bg-gray-100"
                       placeholder="请输入新密码"
                       required
                       data-rule-psw="true"
                       data-msg-required="密码不能为空"
                       data-msg-psw="8-20位的大写字母，小写字母，数字和特殊字符4种组合"
                       minlength="8"
                       maxlength="20"
                       data-msg-minlength="请输入最小8位"
                       disabled="disabled"/>
                <div class="text-sm text-gray-500 mt-1">8-20位的大写字母，小写字母，数字和特殊字符4种组合</div>
            </div>

            <!-- 确认密码输入 -->
            <div>
                <label for="usPassword2" class="block text-sm font-medium text-gray-700 mb-2">
                    确认密码 <span class="text-red-500">*</span>
                </label>
                <input id="usPassword2" name="usPassword2" type="password"
                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent transition-colors duration-200 form-input bg-gray-100"
                       placeholder="确认新密码"
                       required
                       equalTo="#usPassword"
                       disabled="disabled"/>
            </div>

            <!-- 隐藏字段 -->
            <input class="form-control" name="usId" type="text" id="usId" value="" style="display:none"/>

            <!-- 提交按钮 -->
            <div class="pt-4">
                <button type="submit"
                        class="w-full bg-primary hover:bg-primary-dark text-white font-medium py-3 px-4 rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2">
                    重置密码
                </button>
            </div>

            <!-- 消息提示 -->
            <div id="message" class="text-center text-sm text-danger pt-2"></div>
        </form>
    </div>
</div>


</body>

<script src="../plugins/assets/plugins/jquery-3.5.1.min.js" type="text/javascript"></script>
<script src="../plugins/assets/plugins/jquery-validation/dist/jquery.validate.js" type="text/javascript"></script>
<script src="../plugins/assets/plugins/jquery-validation/dist/jquery.metadata.js" type="text/javascript"></script>
<script src="js/formvalidate.js" type="text/javascript"></script>
<script src="js/jquery.md5.js" type="text/javascript"></script>
	<script type="text/javascript">
	$(function(){
	    //jquery.validate
		$("#ff").validate({
			submitHandler: function() {
					//验证通过后 的js代码写在这里
					submitForm();
			}
		})
	})
		function submitForm() {
			//$("#ff").validate({
				var jsonString = JSON.stringify(serializeToJSON('#ff'));
				//console.log(jsonString);
				ajaxSubmitForm(jsonString);
			//})
		}

		function serializeToJSON(formname) {
			var serializeObj=serializeForm($(formname));
			//console.info(serializeObj);
		    return serializeObj;
		}

		function serializeForm(form) { /* 将form表单内的元素序列化为对象，扩展Jquery的一个方法 */
			var o = {};
			$.each(form.serializeArray(), function(index) {
				if (o[this['name']]) {
					o[this['name']] = o[this['name']] + "," + this['value'];
				} else {
					o[this['name']] = this['value'];
				}
			});
			return o;
		}

		var mobilecheck=0;
		var idcardcheck=0;
		var codecheck=0;
		var code;
		function checkmobile() {
			var mobile = $("#usMobile").val();
			var idcard = $("#usIdcard").val();
			var label = document.getElementById("mobilelabel");
			var phone = /^1\d{10}$/;
			if (phone.test(mobile)) {
				$.ajax({
					async:false,
					cache:false,
					url: "../zsUserCount.action?usIdcard=" + idcard+"&usMobile=" + mobile,
					type: "GET",
					dataType: "json",
					success: function(data) {
						if (data.total == "0") {
							$("#mobilelabel").css("color","red");
							$("#mobilelabel").html("该手机号与注册时不符，请使用与注册一致的身份证号手机号");
							mobilecheck=0;
						} else {
							$("#mobilelabel").css("color","green");
							$("#mobilelabel").html("手机号码正确");
							mobilecheck=1;
						}
					},
					error: function(xhr, type, errorThrown) {},
					complete: function(xhr, type, errorThrown) {}
				});
			} else {
				$("#mobilelabel").css("color","red");
				if (mobile == "") $("#mobilelabel").html("请输入手机号码");
				else $("#mobilelabel").html("请输入正确的手机号码");
			}
		}


	function checkidcard() {
		var idcard = $("#usIdcard").val();
		var label = document.getElementById("idcardlabel");
		$.ajax({
			async:false,
			cache:false,
			url: "../zsUserCount.action?usIdcard=" + idcard,
			type: "GET",
			dataType: "json",

			success: function(data) {
				if (data.total == "0") {
					$("#idcardlabel").css("color","red");
					$("#idcardlabel").html("该身份证未注册，请使用注册时的身份证号码");
					idcardcheck=0;
				} else {
					$("#idcardlabel").css("color","green");
					$("#idcardlabel").html("身份证号码正确");
					idcardcheck=1;
				}
			},
			error: function(xhr, type, errorThrown) {},
			complete: function(xhr, type, errorThrown) {}
		});
	}


	function getcode() {
		//alert( idcardcheck+""+mobilecheck);
		if ((idcardcheck == 1) && (mobilecheck == 1)) {
			var mobile = $("#usMobile").val();
			//alert( $("#usMobile").val());
			$.ajax({
				async:false,
				cache:false,
				url: "../sendSMS.action?usMobile=" + mobile,
				type: "GET",
				dataType: "json",
				success: function(data) {
				    //alert(data);
					//code = data.code;
					var count = 60;

					if (data.flag == "success") {

						var yz = document.getElementById("hqyzm");
						yz.disabled = true;
						var timer = setInterval(function() {

							$("#hqyzm").html(count + "秒");
							count--;
							if (count == 0) {
								clearInterval(timer);
								$("#hqyzm").html("获取验证码");
								yz.disabled = false;
							}
						}, "1000");
					}
				},
				error: function(xhr, type, errorThrown) {},
				complete: function(xhr, type, errorThrown) {}
			});
		} else {
			checkmobile();
		}
	}

	function checkcode() {
		var temp = document.getElementById("code").value;
		var label = document.getElementById("codelabel");
		console.info(code);
		console.info(temp);
		if (temp == ""){
			$("#codelabel").css("color","red");
			$("#codelabel").html("请填写验证码");
			codecheck=0;
		} else {
			$.ajax({
				async:false,
				cache:false,
				url: "../checkCode.action?code=" + temp,
				type: "GET",
				dataType: "json",

				success: function(data) {
					if(data.message=="success"){
						$("#codelabel").css("color","green");
						$("#codelabel").html("验证码正确");
						codecheck=1;
						$("#usPassword").removeAttr("disabled");
						$("#usPassword2").removeAttr("disabled");
		        	} else {
		        		$("#codelabel").css("color","red");
		    			$("#codelabel").html("验证码错误");
		    			codecheck=0;
		        	}
				},
				error: function(xhr, type, errorThrown) {},
				complete: function(xhr, type, errorThrown) {}
			});
		}
	}


	function ajaxSubmitForm(jsonString) {
		//alert(codecheck);
		if (idcardcheck==1 && mobilecheck == 1 && codecheck == 1) {
			//验证通过后 的js代码写在这里
			console.log(jsonString);
			$.ajax({
		    	cache: false,
		    	type: "POST",
		        url:"../resetPassword.action",
		        data:{rowstr:jsonString},// 你的formid
		        async: false,
		        error: function(request) {
		        	alert("网络有误");
		        },
		        success: function(data) {
		        	//console.log(data);
		        	if(data.message=="success"){
		            	alert("密码修改成功！");
		            	top.window.location = 'main.jsp';
		        	} else {
		        		alert("密码修改失败！");
		        		window.location = 'getpassword1.jsp';
		        	}
		        }
		    });
		} else {
			alert("请先输入注册时的身份证、手机号");
		}
	}

	</script>
</html>